import React, {useState} from 'react'

import './medit.scss'
import UserInfoStore from "@/common/store/UserInfoStore";
import {apiUpdateUserInfo} from "@/common/apis/user";
import {message} from "antd";
import {observer} from "mobx-react";
import EditPassword from './EditPassword'
import AvatarEditButton from './AvatarButton'

function MEdit() {

  const [editType, setEditType] = useState<string>('')
  const [inputValue, setInputValue] = useState<string>('')

  const changeEditType = (type: string) => {
    if (type === '') {
      setInputValue('')
    } else if (type === 'nick_name') {
      setInputValue(UserInfoStore.NickName || '')
    }
    setEditType(type)
  }

  const updateUserInfo = async (data: any) => {
    apiUpdateUserInfo(data).then(res => {
      if (res.code === 0) {
        setEditType('')
        setInputValue('')
        message.success('更新成功', 1)
        UserInfoStore.reloadUserInfo()
      } else if (res.code === 401) {
        setEditType('')
        setInputValue('')
        message.warn(res.message)
      }
    })
  }

  return (
    <div className='micro-edit'>
      <div className='edit-avatar'>
        <div className='avatar-preview' style={{backgroundImage: `url(${UserInfoStore.Avatar})`}}/>
        <div className='avatar-button'>
          <AvatarEditButton/>
        </div>
      </div>

      <div className='edit-form'>
        <FormItem title='用户名'>{UserInfoStore.NickName}</FormItem>

        <FormItem title='昵称'>
          {editType === 'nick_name' ?
            <>
              <input
                type="text"
                autoFocus={true}
                className='now-value input'
                defaultValue={UserInfoStore.NickName}
                onChange={(e) => {
                  setInputValue(e.target.value)
                }}
              />
              <span className='button' style={{marginRight: '20px'}} onClick={() => changeEditType('')}>取消</span>
              <span className='button' onClick={() => updateUserInfo({'nick_name': inputValue})}>完成</span>
            </>
            :
            <>
              <span className='now-value'>{UserInfoStore.NickName}</span>
              <span className='button' onClick={() => setEditType('nick_name')}>修改</span>
            </>
          }
        </FormItem>

        <FormItem title='手机号'>
          {editType === 'phone' ?
            <>
              <input
                type="text"
                autoFocus={true}
                className='now-value input'
                defaultValue={UserInfoStore.MobilePhone}
                onChange={(e) => {
                  setInputValue(e.target.value)
                }}
              />
              <span className='button' style={{marginRight: '20px'}} onClick={() => changeEditType('')}>取消</span>
              <span className='button' onClick={() => updateUserInfo({'phone': inputValue})}>完成</span>
            </>
            :
            <>
              <span className='now-value'>{UserInfoStore.MobilePhone}</span>
              <span className='button' onClick={() => setEditType('phone')}>修改</span>
            </>
          }
        </FormItem>

        <FormItem title='密码'>
          <EditPassword/>
        </FormItem>
      </div>
    </div>
  )
}

export default MEdit

// 表单单元组件
function FormItem(props: any) {
  return (
    <label className='edit-item'>
      <span className='label'>{props.title}</span>
      {props.children}
    </label>
  )
}



